var h = $(document.body).height();
var w = $(document.body).width();
// $(".console").text(h + "," + w);
// console.log(window.orientation);

var complete_sign = false;

if (window.orientation == 0) {
    w = $(document.body).height();
    h = $(document.body).width();
    $(".sign-x").css("z-index", -1);
    $(".sign-y").css("z-index", 999);
    $(".top").css(
        {
            "width": w + "px",
            "margin-left": h - (w / 2) - 25 + "px",
            "margin-top": (w / 2) - 25 + "px",
        }
    );
    $("#signature-container").css("transform", "rotate(90deg)");
    $(".sign-x").css("margin", 0);
    $(".sign-y").css("margin-right", "50px");
} else {
    $(".sign-x").css("z-index", 999);
    $(".sign-y").css("z-index", -1);
    $("#signature-container").css("transform", "rotate(0deg)");
    $(".sign-x").css("margin-top", "50px");
    $(".sign-y").css("margin", 0);
}
// console.log(w);
// console.log(h);

// 横屏时显示画布
var sign_x = new EleSign({
    ele: null,
    color: "#000",
    // bgColor: "#efeff4",
    pen: "default"
});
sign_x.init();
sign_x.moutedEle(document.getElementById("sign-x"));
sign_x.resizeWithNumber(w, h - 50);
sign_x.resize();

// 自适应屏幕
// var timemrId_x = -1;
// window.onresize = function () {
//     clearTimeout(timemrId_x);
//     timemrId_x = setTimeout(function () {
//         sign_x.resize();
//     }, 100);
// }

// 清除
var clear_x = document.getElementById("clear");
clear_x.addEventListener("click", function () {
    sign_x.clear();
})

// 撤消
var undo_x = document.getElementById("undo");
undo_x.addEventListener("click", function () {
    sign_x.undo();
})

// 重做
var redo_x = document.getElementById("redo");
redo_x.addEventListener("click", function () {
    sign_x.redo();
})

// 竖屏时显示画布
var w_y = h;
var h_y = w;
var sign_y = new EleSign({
    ele: null,
    color: "#000",
    // bgColor: "#efeff4",
    pen: "default"
});
sign_y.init();
sign_y.moutedEle(document.getElementById("sign-y"));
sign_y.resizeWithNumber(w_y - 50, h_y);
sign_y.resize();

// 自适应屏幕
// var timemrId_y = -1;
// window.onresize = function () {
//     clearTimeout(timemrId_y);
//     timemrId_y = setTimeout(function () {
//         sign_y.resize();
//     }, 100);
// }

// 清除
var clear_y = document.getElementById("clear");
clear_y.addEventListener("click", function () {
    sign_y.clear();
})

// 撤消
var undo_y = document.getElementById("undo");
undo_y.addEventListener("click", function () {
    sign_y.undo();
})

// 重做
var redo_y = document.getElementById("redo");
redo_y.addEventListener("click", function () {
    sign_y.redo();
})

window.addEventListener("orientationchange", function () {
    // 直接刷新 简单粗暴
    if (!complete_sign) {
        $(".top").hide();
        location.reload();
    }
    // Announce the new orientation number
    console.log(window.orientation);
    // if (window.orientation == 0) {
    //     // 当为竖屏时 宽高调换
    //     w_y = $(document.body).height();
    //     h_y = $(document.body).width();
    //     $(".sign-x").css("z-index", -1);
    //     $(".sign-y").css("z-index", 999);
    //     $(".top").css(
    //         {
    //             "width": w + "px",
    //             "margin-left": h - (w / 2) - 25 + "px",
    //             "margin-top": (w / 2) - 25 + "px",
    //         }
    //     );
    //     $("#signature-container").css("transform", "rotate(90deg)");
    //     $(".sign-x").css("margin", 0);
    //     $(".sign-y").css("margin-right", "50px");
    //     // 重置画布宽高
    //     sign_y.resizeWithNumber(w_y - 50, h_y);
    //     sign_y.resize();
    // } else {
    //     h_y = $(document.body).height();
    //     w_y = $(document.body).width();
    //     $(".sign-x").css("z-index", 999);
    //     $(".sign-y").css("z-index", -1);
    //     $("#signature-container").css("transform", "rotate(0deg)");
    //     $(".sign-x").css("margin-top", "50px");
    //     $(".sign-y").css("margin", 0);
    //     // 重置画布宽高
    //     sign_x.resizeWithNumber(w_y, h_y - 50);
    //     sign_x.resize();
    // }
}, false);